<template>
  <div class="app-container" ref="appcontainer">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
      <!-- <el-form-item label="表码" prop="name"> -->
      <el-input v-model="queryParams.nickName" placeholder="姓名" clearable size="small" @keyup.enter.native="handleQuery"
        style="width:10%;margin-right:10px" />
      <el-input v-model="queryParams.mobile" placeholder="手机号" clearable size="small"
        style="width:10%;margin-right:10px" />
      <el-select v-model="queryParams.post" placeholder="岗位" style="width:8%;margin-right:10px">
        <el-option v-for="item in jobOptions" :key="item.dictValue" :label="item.dictLabel"
          :value="item.dictValue"></el-option>
      </el-select>
      <el-select v-model="queryParams.status11" placeholder="检测工程" style="width:10%;margin-right:10px">
        <el-option v-for="item in jcoptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-select v-model="queryParams.status" placeholder="状态" style="width:10%;margin-right:10px">
        <el-option v-for="item in statusOptions" :key="item.dictValue" :label="item.dictLabel"
          :value="item.dictValue"></el-option>
      </el-select>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        <el-button type="primary" size="mini" @click="handleAdd">新增</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :height="tableHeight" :data="list">
      <el-table-column label="序号" align="center" prop="userId" />
      <el-table-column label="姓名" align="center" prop="nickName" />
      <el-table-column label="手机号" align="center" prop="phonenumber" />
      <el-table-column label="岗位" align="center" prop="post" />
      <el-table-column label="状态" align="center" prop="status">
         <template slot-scope="scope">
            <el-switch v-model="scope.row.status" class="drawer-switch" active-value="0"  inactive-value="1"/>
        </template>
      </el-table-column>
      <el-table-column label="照片" align="center" prop="image">
        <template slot-scope="scope">
          <img :src="scope.row.avatar" alt/>
        </template>
      </el-table-column>
      <el-table-column label="所属单位" align="center" prop="enterpriseName" />
      <el-table-column label="所属工程" align="center" prop="engineeringName" />
      <el-table-column label="创建时间" align="center" prop="createTime" />

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleEdit(scope.row)">修改</el-button>

          <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
          <el-button size="mini" type="text" @click="handleLook(scope.row)">打卡历史</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <el-dialog :title="title" :visible.sync="handDialogVisible" width="50%" @close="handleClose" class="detaildialog">
      <el-form :model="formParams" ref="formParams" :inline="true" label-width="68px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="单位名称" prop="ipaddr" style="width:100%">
              <el-select v-model="formParams.enterpriseId" placeholder style="margin-right:10px;">
                <el-option v-for="item in organOptions" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="margin-bottom-10">
          <el-col :span="24">
            <el-form-item label="姓名" prop="ipaddr" style="width:100%">
              <el-input type="input" v-model="formParams.nickName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="手机号" prop="ipaddr">
              <el-input type="input" v-model="formParams.phonenumber"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="margin-bottom-10">
          <el-col :span="24">
            <el-form-item label="状态" prop="ipaddr">
              <el-select v-model="formParams.status" placeholder style="margin-right:10px">
                <el-option v-for="item in statusOptions" :key="item.dictValue" :label="item.dictLabel"
                  :value="item.dictValue"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="岗位" prop="ipaddr">
              <el-select v-model="formParams.enterpriseName" placeholder style="margin-right:10px;">
                <el-option v-for="item in jobOptions" :key="item.dictValue" :label="item.dictLabel"
                  :value="item.dictValue"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="所属工程" prop="ipaddr" style="width:100%">
              <el-select v-model="formParams.engineeringName" placeholder style="margin-right:10px;">
                <el-option v-for="item in engineOptions" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="照片" prop="ipaddr" style="width:100%">
            <imageUpload v-model="formParams.avatar" />
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">保存</el-button>
        <el-button @click="cancel(handDialogVisible = false)">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getryList, getDeatil, addList, updateList, updatedtList, delList,updatedtallList } from "@/api/staff/index";
export default {
  data() {
    return {
      list: [],
      fileList: [],
      imageUrl: "",
      organOptions: [
        {
          label: "22",
          value: "22"
        }
      ],
      formParams: {
        enterpriseId:'',
        // name: '',
        // mobile: '',
        // post: '',
        // status: '',
        // image: '',
        // enterpriseId: '',
        // engineeringId: ''

      },
      engineOptions: [
        {
          label: "122",
          value: "122"
        }
      ],


      gwoptions: [
        {
          label: "21",
          value: "21"
        }
      ],
      jcoptions: [
        {
          label: "14",
          value: "14"
        }
      ],
      queryParams: {
        nickName: "",
        phonenumber:'',
        pageNum: 1,
        pageSize: 10,
        status: "",
        enterpriseName:'',
        avatar: "",
        enterpriseId: ""
      },
      total: 0,
      loading: true,
      tableHeight: 0,
      handDialogVisible: false,
      detail: [],
      detailTotal: 0,
      detailQueryParams: {
        pageNum: 1,
        pageSize: 10
      },
      title: "员工分销明细",
      currentLookId: null
    };
  },
  methods: {
       /** 搜索按钮操作 */
    handleQuery() {
      // this.showSearch=false;
      this.queryParams.pageNum = 1;
      
      //this.getList();
      this.searchall()
    },
    searchall(){
      updatedtallList(this.queryParams).then(res=>{

      })
    },
    handleDelete(row) {
      const ids = row.userId || this.ids;
      this.$confirm('是否确认删除?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return delList(ids);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      }).catch(() => { });
    },
    handleEdit(row) {
      // this.reset();
      const id = row.userId || this.ids
      updatedtList(id).then(response => {
          this.formParams = response.data
        this.handDialogVisible = true;
        this.title = "修改人员";
      })
    },
    submitForm() {
      this.$refs["formParams"].validate(valid => {
        if (valid) {
          if (this.formParams.userId != null) {
            updateList(this.formParams).then(response => {
              this.msgSuccess("修改成功");
              this.handDialogVisible = false;
              this.getList();
            });
          } else {
            addList(this.formParams).then(response => {
              this.msgSuccess("新增成功");
              this.handDialogVisible = false;
              this.getList();
            });
          }
        }
      });
    },
    reset() {
      this.formParams = {
        name: '',
        mobile: '',
        post: '',
        status: '',
        image: '',
        enterpriseId: '',
        engineeringId: ''

      },
        this.resetForm("formParams");
    },
    handleAdd() {
      this.reset()
      this.title = "新增人员";
      this.handDialogVisible = true;
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    calHeight() {
      this.$nextTick(() => {
        const rect = this.$refs.appcontainer.getBoundingClientRect();
        this.tableHeight = rect.height - 120;
      });
    },
    getList() {
      this.loading = true;
      getryList(this.queryParams)
        .then(res => {
          this.list = res.rows;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleLook(row) {
      this.currentLookId = row.userId;
      this.getDetail();
    },
    // getDetail() {
    //   getDeatil(this.currentLookId, this.detailQueryParams).then(res => {
    //     this.handDialogVisible = true;
    //     this.detail = res.data.rows;
    //   });
    // },
    handleClose() {
      this.detailQueryParams = {
        pageNum: 1,
        pageSize: 10
      };
      this.detail = [];
    },

    getstatus() {
      this.getDicts("gc_staff_status").then(response => {
        this.statusOptions = response.data;
      });
    },

    getjob() {
      this.getDicts("gc_staff_type").then(response => {
        this.jobOptions = response.data;
      });
    }
  },
  mounted() {
    this.calHeight();
    this.getList();
    this.getstatus();
    this.getjob()
  }
};
</script>
<style>
/* .detaildialog .el-dialog {
  height: 800px;
} */
/* .detaildialog .el-dialog__body {
  height: 740px;
  max-height: 74vh;
} */
</style>